<template>
  <div class="report-board">
    <!-- 封装一个报告子组件 -->
    <van-form>
      <van-cell-group inset>
        <!-- 事件类型 -->
        <div v-for="(item, index) in data" :key="index">
          <van-field
            v-model="item.fieldValue"
            :label="item.label"
            :placeholder="item.placeholder"
            :rules="item.rules"
            @click="item.showPicker = true"
          >
            <template v-if="item.type == 'upload'" #input>
              <van-uploader
                :before-read="beforeRead"
                :after-read="afterRead"
                v-model="fileList"
              ></van-uploader>
            </template>
          </van-field>
          <van-popup
            v-if="item.hasPopup"
            :show="item.showPicker"
            round
            position="bottom"
            :style="{ lineHeight: '50px' }"
          >
            <van-picker
              :columns="item.columns"
              @cancel="item.showPicker = false"
              @confirm="
                (selectedValue) => {
                  onConfirm(selectedValue, item)
                }
              "
            />
          </van-popup>
        </div>
        <div class="timer">
          <div class="chooseT">选择时间</div>
          <div class="pickT">
            <time-picker
              @getDate="clickDate"
              @getTime="clickTime"
            ></time-picker>
          </div>
        </div>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          @click="onSubmit(data)"
        >
          提交
        </van-button>
      </div>
    </van-form>
    <div>{{ result }}</div>
  </div>
</template>

<script setup>
import { getEvents } from '../models/EventHttp'
import { postEvents } from '../models/EventHttp'
import { onConfirm } from '../views/Home/event-data'
import TimePicker from '../components/TimePicker.vue'
import { upload } from '../../src/api/upload'
// 也可以写成@,vue3自动识别到src
// 子组件拿到report-view父组件的传值
import { onMounted, ref } from 'vue'
const { data } = defineProps({
  data: {
    type: Array,
  },
})

//时间组件
const resultone = ref('')
const resulttwo = ref('')
const result = ref('')
// 时间组件传值
const clickDate = (val1) => {
  resultone.value = val1.curdate
}
const clickTime = (val2) => {
  resulttwo.value = val2.curtime
}

//先设置一个默认地址,然后后面取到新地址再把原来的覆盖
const file = ref([])
//图片回显
const fileList = ref([])
// 上传图片
const beforeRead = (file) => {
  if (file.type !== 'image/jpeg') {
    Toast('请上传 jpg 格式图片')
    return false
  }
  return true
}
const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  //console.log(file, file.content)
  const form = new FormData()
  //注意文件数据在file.file里
  form.append('file', file.file)
  upload(form).then((res) => {
    file.value = res.data.imageUrl
    fileList.value.push({
      url: res.data.imageUrl,
    })
    // const pop = fileList.value.pop
    // pop.url = res.data.imageUrl
    // fileList.value.push(pop)
    console.log(fileList.value)
  })
}

// 提交表单
const onSubmit = (data) => {
  let imgArr = fileList.value.map((item) => item.url)
  console.log(imgArr[1])
  //遍历数组拿到整个表单的值
  const list = data.map((item) => item.fieldValue)
  //获取时间
  result.value = resultone.value + ' ' + resulttwo.value
  const obj = {
    type: list[0],
    address: list[1],
    imgUrl: imgArr[1],
    time: result.value,
    description: list[3],
    sign: list[4],
  }
  //将整个表单的值形成一个新的对象传给接口
  console.log(obj)
  postEvents(obj).then((res) => {
    console.log(res)
  })
}
</script>

<style scoped>
.report-board {
  margin-top: 15%;
}
.timer {
  display: flex;
  margin-left: 15px;
  color: #646579;
  margin-top: 10px;
  margin-bottom: 10px;
}
.chooseT {
  float: left;
  width: 100px;
  margin-top: 5px;
  font-size: 18px;
  text-align: left;
}
.pickT {
  transform: translate(5px, -5px);
  display: flex;
  width: 240px;
  text-align: left;
}
.van-cell {
  font-size: 18px;
  line-height: 85px;
}
</style>
